var innerArea =
    '<div class="main-area">' +
        '<div class="inner-area" tabindex="0" hidefocus="true" @blur="blurAction($event)" v-for="(uitem,key) in ulist" >' +
            '<div class="in-area clearfix">' +
                '<input type="hidden" :ukey="key" />' +
                '<input type="checkbox" :id="uitem.id" :checked="uitem.checked" @change="setCheck(uitem)" v-show="show"/>' +
                '<input type="text" class="input-text" :value="uitem[fields.f2]" @keyup.prevent="inputKeyup($event)" @focus="inputFocus($event)" v-model="uitem[fields.f2]">' +                
            '</div>' +
            '<table class="table table-border table-bordered table-bg table-hover table-sort"' +
            'style="width: 100% !important;display: none;">' +
                '<thead>' +
                    '<tr class="text-c">' +
                        '<th v-for="y in thlist">{{y.name}}</th>' + 
                    '</tr>' +
                '</thead>' +
                '<tbody>' +
                    '<tr class="text-c" v-for="item in tlist" @click.stop="selectUser($event,uitem,item)">' +
                        '<td v-for="z in thlist">{{ item[z.key] }}</td>' +
                    '</tr>' +
                '</tbody>' +
                '<tfoot>' +
                    '<tr>' +
                        '<td colspan="4">' +
                        '<v-pagination :page-no="pageNum" :page-size="pageSize" :total="total" page-ctrl-num="5" @change="toPage"></v-pagination>' +
                        '</td>' +
                    '</tr>' +
                '</tfoot>' +
            '</table>' +
        '</div>' +
    '</div>';

Vue.component('selectBox', {
    template: innerArea,
    props:{
        userList:Array,
        tableList:Array,
        tHead:Array,
        fields:Object,
        pnum:Number, //页码
        psize:Number, //每页条数
        tnum:Number,  //总条数
        field:Array,   //转换的字段名称
        show:Boolean
    },
    data:function(){
        return{
            pageNum: this.pnum,
            pageSize: this.psize,
            total: this.tnum,  
            tlist:this.tableList,
            ulist:this.userList,
            thlist:this.tHead
        }
    },
    methods:{ 
        // input输入框
        inputKeyup:function(e){
            var currentInput = e.target; 
            var _this = this;        
            if(currentInput.value != ''){                
                $(currentInput.parentNode.nextElementSibling).css("display","table");
                setTimeout(function(){
                    _this.$emit('paging',1,currentInput.value)},50);
            }else{
                setTimeout(function(){
                    _this.$emit('paging',1,'')},50);
            }
        },

        //输入框获取到焦点时，显示表格及数据
        inputFocus:function(e){
            var currentInput = e.target;
            $(".table").hide();
            $(currentInput.parentNode.nextElementSibling).css("display","table");
            var _this = this;
            setTimeout(function(){
                _this.$emit('paging',1,currentInput.value)},50);           
        },

        //复选框事件
        setCheck:function(uitem){  
            if(uitem.checked == false || uitem.checked == undefined){
                uitem.checked = true;
            }else{                
                uitem.checked = false;
            }
        },          

        //点击表格中的一条，选择用户
        selectUser:function(e,uitem,item){
            var currentTR = e.target;
            $(".table tr").removeClass("select-user");
            $(currentTR.parentNode).addClass("select-user");
            uitem[this.fields.f1] = item[this.fields.f1];
            uitem[this.fields.f2] = item[this.fields.f2];
        },     
        
        //设置整个div失去焦点之后关闭表格
        blurAction:function(e){
            $(".table").hide();
        },

        //分页组件事件
        toPage:function(pageNum){
            this.$emit('paging',pageNum,'');
        }
        
    },
    watch:{
        userList:function(val,oldVal){
            if(val){
                this.ulist = val;
            }
        },
        tableList:function(val,oldVal){
            if(val){
                this.tlist = val;
            }
        },
        pnum:function(val,oldVal){
            if(val){
                this.pageNum = val;
            }
        },
        psize:function(val,oldVal){
            if(val){
                this.pageSize = val;
            }
        },
        tnum:function(val,oldVal){
            if(val){
                this.total = val;
            }
        },
    }
})